<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery.layout</title>
<link rel="stylesheet" type="text/css" href="../themes/default/panel.css" />
<link rel="stylesheet" type="text/css" href="../themes/default/layout.css" />
<script type="text/javascript" src="../jquery-1.10.2.js">
</script>
<script type="text/javascript" src="../src/jquery.parser.js">
</script>
<script type="text/javascript" src="../src/jquery.resizable.js">
</script>
<script type="text/javascript" src="../src/jquery.panel.js">
</script>
<script type="text/javascript" src="../src/jquery.layout.js">
</script>
</head>
<body class="xui-layout">
<div data-options="region:'north',title:'North Title',split:false,noheader:true" style="height:100px;">
</div>
<div data-options="region:'south',title:'South Title',split:false" style="height:100px;">
</div>
<!--
<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:150px;">
</div>
-->
<div data-options="region:'west',title:'West',split:true" style="width:100px;">
</div>
<div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;">
<iframe scrolling="auto" frameborder="0"  src="#" style="width:100%; height:100%;z-index:0;"></iframe>
</div>
<script type="text/javascript">
$('.xui-layout').layout();
</script>
</body>
</html>